<script lang="ts">
import { defineComponent, inject, reactive } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      dialogVisible: false,
    });
    const handleScrollTop = () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 0) {
        const timeTop = setInterval(() => {
          document.documentElement.scrollTop = document.body.scrollTop = scrollTop -= 50; //一次减50往上滑动
          if (scrollTop <= 0) {
            clearInterval(timeTop);
          }
        }, 10);
      }
    };

    const callPhone = (phone:any) => {
      window.location.href = "tel://" + Number(phone);
    };
    const myFn = inject<any>("open");
    const handleOpenContact = () => {
      // myFn()
      data.dialogVisible = true;
    };

    return {
      handleOpenContact,
      handleScrollTop,
      data,
      callPhone,
    };
  },
});
</script>

<template>
  <el-row>
    <el-col :xs="0" :sm="0" :md="24" :lg="24" :xl="24">
      <div class="box">
        <!-- <div class="customMade" @click="handleOpenContact()">
          <div class="dialogIcon">
            <i class="iconfont icon-ceshishenqing"></i>
          </div>
          <div>申请体验</div>
        </div> -->
        <div class="customMade" @click="handleOpenContact()">
          <div class="dialogIcon">
            <i class="iconfont icon-zixun-01"></i>
          </div>
          <div>联系我们</div>
        </div>
        <div class="customMade" @click="handleScrollTop">
          <div class="dialogIcon">
            <i class="iconfont icon-fanhuidingbu2"></i>
          </div>
          <div>返回顶部</div>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="data.dialogVisible" title="联系我们" width="30%">
    <el-row style="height: 100%">
      <el-col>
        <div style="height: 100%" class="flex text_center align_center justify_around">
          <div class="footer-qrCode">
            <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/off.png" alt="" />
            <div class="contentText">微信公众号</div>
          </div>
          <div class="footer-qrCode">
            <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/WX.png" alt="" />
            <div class="contentText">企业微信号</div>
          </div>
          <div class="footer-qrCode">
            <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/QQ.png" alt="" />
            <div class="contentText">QQ联系号</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="pointer" >
      <div class="">联系我们</div>
      <div class="fweightBold" style="margin: 12px 0 0 0">
        电话：<span @click="callPhone('07523279220')">0752-3279220（总机）、</span>
        <span @click="callPhone('18682174299')">+86-18682174299（手机）</span>
      </div>
      <div class="fweightBold" style="margin: 12px 0 0 0">
        联系人：陈小姐/susan
      </div>
      <div class="fweightBold" style="margin: 12px 0 0 0">
        邮箱：huizhoueii@163.com 
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 0px;
}
.pointer {
  margin-top: 20px;
}
.footer-qrCode {
  width: 90px;
  .contentText {
    font-size: 18px;
  }
  img {
    width: 100%;
    height: 100%;
    margin-bottom: 7px;
    object-fit: contain;
  }
}

.box {
  position: fixed;
  right: 1%;
  top: 55%;
  z-index: 9;

  .customMade {
    cursor: pointer;
    text-align: center;
    width: 70px;
    height: 70px;
    // line-height: 40px;
    position: relative;
    background: #fff;
    color: #172e59;
    margin-bottom: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  }

  .dialogIcon {
    margin-bottom: 10px;

    .iconfont {
      font-size: 21px;
      color: #172e59;
    }
  }
}
</style>
